<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>热词</title>
    <script src="../../components/echarts-4.0.4.min.js"></script>
    <style>
        body,html{
            padding: 0;
            margin: 0;
            background:#0A0F23;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div style="width: 100%;height: 100%;" id="turnover"></div>
</body>
<script>
    var turnover = echarts.init(document.getElementById('turnover'));
    var barOption = {
        title: {
            text: '西安科技大市场政策培训情况',
            left: 'center',
            top:'7%',
            textStyle: {
                color: '#fff',
                fontSize: 22
            }
        },
        legend: {
            show:false
        },
        tooltip: {
            trigger: 'none',
            axisPointer: {
              type: 'shadow',
            }
        },
        grid: {
            left: '5%',
            right: '10%',
            bottom: '10%',
            top:'25%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
		        boundaryGap: false,
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel: {
                    interval: 0,
                    rotate: 30,
                    textStyle: {
                        color: '#fff',fontSize:16
                    }
                },
                splitLine: {
                    show: false
                },
                data : ['2011','2012','2013','2014','2015','2016','2017']
            }
        ],
        
	    yAxis : [
	        {
	            type : 'value',
	            axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel: {
                    interval: 0,
                    rotate: 30,
                    textStyle: {
                        color: '#fff',fontSize:16
                    }
                },
                splitLine: {
                    show: false
                },
	        }
	    ],
	    series : [
	        {
	            name:'培训次数',
	            type:'line',
                smooth: true, //是否平滑曲线显示
                lineStyle: { //线条样式 
                    normal: {
                        width: 1
                    }
                },
                areaStyle: { //区域填充样式
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(0, 255, 255, 0.9)'
                        }, {
                            offset: 0.7,
                            color: 'rgba(0, 255, 255, 0.6)'
                        }], false),
		                         shadowColor: 'rgba(0, 0, 0, 0.9)', //阴影颜色
                        shadowBlur: 10 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                    }
                },
                itemStyle: { //折现拐点标志的样式
                    normal: {
                        color: 'rgb(0,255,255)'
                    }
                },
	            barWidth: '60%',
	            data:[120,500,630, 340, 460, 990, 1220]
	        }
	    ]
    }

    turnover.setOption(barOption);
</script>
</html>